<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />
    <meta name="author" content="haijun.liu" />
    <title>系统用户管理</title>
    <link th:href="@{/images/favicon_1.ico}" rel="shortcut icon">
    <link  rel="stylesheet" type="text/css"  th:href="@{/plugins/sweetalert/dist/sweetalert.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/plugins/morris.js/morris.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap.min.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrapValidator.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-table.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-dialog.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/core.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/icons.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/components.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/pages.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/menu.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/responsive.css}"  />

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrapValidator.js}"></script>
    <script th:src="@{/js/bootstrap-table.js}"></script>
    <script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
    <script th:src="@{/js/bootstrap-dialog.js}"></script>
    <script th:src="@{/js/app.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript">
        $(function(){
            /*bootstrap table*/
            $('#table').bootstrapTable({
                url:"/system/userRole/getUserRoleList",//请求数据url
                queryParams: function (params) {
                    return {
                        offset: params.offset,  //页码
                        limit: params.limit,   //页面大小
                        search : params.search, //搜索
                        order : params.order, //排序
                        ordername : params.sort, //排序
                    };
                },
                toolbar:"#toolbar",
                checkboxHeader: true,
                clickToSelect:true,
                showHeader : true,
                showColumns : true,
                showRefresh : true,
                pagination: true,//分页
                sidePagination : 'server',//服务器端分页
                pageNumber : 1,
                pageList: [10, 15, 20],//分页步进值
                search: false,//显示搜索框
                //表格的列 data-checkbox="true"
                columns: [
                    {
                        field: '选择',//域值
                        title: '全选',//标题
                        checkbox:true
                    },
                    {
                        field: 'username',//域值
                        title: '用户名',//标题
                        visible: true,//false表示不显示
                        sortable: true,//启用排序
                        width : '5%',
                    },
                    {
                        field: 'name',//域值
                        title: "所属角色",//标题
                        visible: true,//false表示不显示
                        width : '5%',
                        editable:true,
                    },
                    {
                        field: 'ip',//域值
                        title: '最后登陆IP',//内容
                        visible: true,//false表示不显示
                        width : '10%',
                        editable:true,
                    },
                    {
                        field: 'lastLoginTime',//域值
                        title: '最后登陆时间',//内容
                        visible: true,//false表示不显示
                        width : '10%'
                    },
                    {
                        field: 'email',//域值
                        title: 'EMAIL',//内容
                        visible: true,//false表示不显示
                        width : '5%',
                    },
                    {
                        field: 'userId',//域值
                        title: '操作',//内容
                        visible: true,//false表示不显示
                        width : '20%',
                        formatter : function (value, row, index) {
                            var roleId=row.roleId;
                            var ahref ="<a href=\"javascript:void(0)\" onclick=\"toUpdate(" + value + ")\"  class=\"btn btn-primary\">修改</a>";
                                ahref+="<a href=\"javascript:void(0)\" onclick=\"deleteUserRole(" + value + ", " + roleId + ")\"   class=\"btn btn-primary\">删除</a>";

                            return ahref;
                        },
                    }
                ]

            });

            /**
             * 查询
             */
            $('#btn_query').click(function () {
                console.log('我点了');
                data =  $('#queryForm').serializeObject();
                $('#table').bootstrapTable('refresh', {
                    query: data
                });
            });

            /**
             * 重置
             */
            $('#btn_reset').click(function () {
                $("#queryForm")[0].reset() ;
            });


            function expandTable($detail, cells) {
                buildTable($detail.html('<table></table>').find('table'), cells, 1);
            }

            function buildTable($el, cells, rows) {
                var i, j, row,
                    columns = [],
                    data = [];

                for (i = 0; i < cells; i++) {
                    columns.push({
                        field: 'field' + i,
                        title: 'Cell' + i,
                        sortable: true
                    });
                }
                for (i = 0; i < rows; i++) {
                    row = {};
                    for (j = 0; j < cells; j++) {
                        row['field' + j] = 'Row-' + i + '-' + j;
                    }
                    data.push(row);
                }
                $el.bootstrapTable({
                    columns: columns,
                    data: data,
                    detailView: cells > 1,
                    onExpandRow: function (index, row, $detail) {
                        expandTable($detail, cells - 1);
                    }
                });
            }
            /**
             * 处理添加功能
             */
            $("#btn_add").click(function () {
                $("#modal").on("hidden.bs.modal", function() {
                    $(this).removeData("bs.modal");
                });
                $("#modal").modal({
                    remote: "/system/userRole/toAdd"
                });

            });

            /**
             * 管理员日志列表
             */
            $("#btn_man").click(function () {
                window.location.href="";

        });

    })
        /**
         * 禁播
         */
        function ban(roomId) {
            $("#modal").on("hidden.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
            $("#modal").modal({
                remote: "/room/room/banSpringboard?roomId=" + roomId
            });
        }

        /**
         * 调转编辑页面
         */
        function toUpdate(id) {
            $("#modal").on("hidden.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
            $("#modal").modal({
                remote: "/system/userRole/toUpdate?id=" + id
            });
        }


        function deleteUserRole(userId,roleId) {
            showConfirm('确定要删除？', function () {
                var options = {
                    url: '/system/userRole/delete',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        userId:userId,
                        roleId:roleId
                    } ,
                    success: function (data) {
                        // 4 删除成功后弹出成功提示框，并且刷新表格
                        if (data){
                            showAlert('删除成功!',function () {
                                $('#table').bootstrapTable('refresh', {silent: true})
                            });
                        }
                    }
                };
                $.ajax(options);
            }, function () {
                return ;
            });
        }
    </script>
</head>



<body class="fixed-left">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-btns"><a href="#" class="minimize">−</a></div>
        <h4 class="panel-title">查询</h4>
    </div>
    <div class="panel-body">
        <form id="queryForm" class="form-horizontal">
            <div class="row">
                <div class="col-sm-6 col-md-4 mb15">
                    <div class="form-group">
                        <label class="control-label col-xs-3">用户名：</label>
                        <div class="col-xs-7">
                            <input class="form-control" placeholder="用户编码" id="username" name="username" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 mb15">
                    <div class="form-group">
                        <label class="control-label col-xs-3">角色名称：</label>
                        <div class="col-xs-7">
                            <input class="form-control" placeholder="用户名" id="name" name="name" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 mb15 pull-right text-right">
                    <a href="#" id="btn_query" class="btn btn-primary"><i class="fa fa-search"></i>查询</a>&nbsp;
                    <a href="#" id="btn_reset" class="btn btn-warning"><i class="fa md-clear-all"></i>重置</a>&nbsp;
                </div>
            </div>
        </form>
    </div>
</div>
<div id="toolbar">
    <p>
        <button id="btn_add" type="button" class="btn btn-success"><i class="fa fa-plus"></i>添加管理远</button>
        <button id="btn_man" type="button" class="btn btn-danger"><i class="fa fa-close"></i>管理员日志</button>
    </p>
</div>
<table id="table"></table>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
</body>
</html>